<template>
	<div class="details-zhuti">
		<!-- 头部导航 -->
		<div class="details-header">
			<van-nav-bar :title="imgLsit.name" left-arrow @click-left="onClickLeft" />
		</div>
		<div class="details">
			<!-- 中间主体部分 -->
			<div class="details-main">
				<!-- 海报图 -->
				<div class="details-banner">
					<img :src="baseUrl + imgLsit.bgUrl" />
				</div>
				<!-- 内容 -->
				<div class="details-content">
					<van-tabs @click="onClick">
						<van-tab title="详情">
							<div class="details-content-text">
								<div>
									<strong> {{ imgLsit.name }}</strong>
								</div>
								<div class="details-content-text-likes">
									{{ imgLsit.likes }}
								</div>
								<hr />
								<div class="information">
									<table border="1px" cellspacing="" cellpadding="">
										<tr>
											<td class="information-text">活动日期</td>
											<td>{{ imgLsit.detailDate }}</td>
										</tr>
										<tr>
											<td>场馆地址</td>
											<td>{{ imgLsit.detailaddress + imgLsit.address }}</td>
										</tr>
										<tr>
											<td>儿童说明</td>
											<td>{{ imgLsit.detailChild }}</td>
										</tr>
										<tr>
											<td>入场次数</td>
											<td>{{ imgLsit.detailTimes }}</td>
										</tr>
										<tr>
											<td>入场说明</td>
											<td>{{ imgLsit.detailInRemark }}</td>
										</tr>
										<tr>
											<td>退换说明</td>
											<td>{{ imgLsit.detailOutRemark }}</td>
										</tr>
									</table>
								</div>

								<img :src="this.imgOne" alt="" srcset="" />
							</div>
						</van-tab>
						<van-tab title="须知">
							<div class="notice">
								<span> 购票须知 </span>
								1、会员购在线售票为电子票或纸质票。
								2、如您购买的是电子票，入场时请在bilibili
								APP中的【订单中心】打开电子票检票入场(部分
								活动需兑换实体票入场)；电子票不得转售，请在
								正规途径购买；电子票截图无法入场。3、如您购
								买的是纸质票，需在购票时填写准确配送信息，纸
								质票将在活动开始之前寄出，邮费由用户承担；因
								纸质票的特殊性，遗失不补且无法挂失，请您保管
								好购买到的票品。4、部分活动不提供现场售票服务，
								请您提前购买。5、因票品具有稀缺性和时效性的特点，
								一旦退货将会影响二次销售，票品均不支持七天无理由退票，
								请您理解并审慎购买。并非所有项目主办方都支
								持因个人原因发起的退票，具体请以各商品展示页
								说明信息为准，请您在购买前仔细阅读商品信息。
								6、若所购项目主办方支持因个人原因退票，您在因
								个人原因退票时需支付一定比例的手续费，具体比例
								您可在《bilibili票务服务协议》中查询。7、为保
								障您的人身安全，主办方在人流高峰可能会采取临时
								现场限流措施，如对您的正常观展产生影响，敬请谅
								解。8、若有其他问题请联系客服：客服入口在移动
								端APP“我的”个人中心，点击“我的客服”，选择“在
								线客服”，即可咨询。9、《会员购服务协议》
							</div>
						</van-tab>
						<van-tab title="周边">
							<div class="recommendCommodity">
								<div v-for="item in showList" :key="item.id">
									<van-card :desc="item.wish + '人想去'" :title="item.project_name"
										:thumb="baseUrl + item.cover">
										<template #tags>
											<van-tag plain type="danger">{{item.project_type}}</van-tag>
										</template>
										<template #price>
											<span class="price">
												<span>￥
													<p>{{ item.price_low }}</p>
													起
												</span>
											</span>
										</template>
									</van-card>
								</div>
							</div>
						</van-tab>
					</van-tabs>
				</div>
			</div>
		</div>
		<!-- 底部按钮 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" />
			<van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/index/cart')" />
			<van-goods-action-button type="danger" text="加入购物车" @click="addCart()" />
		</van-goods-action>
	</div>
</template>

<script>
	import { addCartApi, showListApi } from "../../apis/recommendApi";
	import { detailsShowApi } from "../../apis/details";
	import { Toast } from "vant";
	export default {
		data() {
			return {
				id: "",
				showList: [],
				scrollspy: true,
				sticky: true,
				imgLsit: {},
				// 展示第一张图片
				imgOne: "",
				baseUrl: 'http://10.7.162.81:15666'
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters["common/user"];
			},
		},
		created() {
			this.id = this.$route.params.id;
		},
		mounted() {
			showListApi({
				page: 1,
				size: 10,
				city: "",
				name: "",
			}).then((d) => {
				this.showList = d.data.rows.map((it) => {
					return it;
				});
			});
			let id = this.id;
			detailsShowApi(id).then((d) => {
				d.data.content = d.data.content.split("JOIN__STRING");
				this.imgLsit = d.data;
				this.imgOne = "http://localhost:15666" + this.imgLsit.content[0];
			});
		},
		methods: {
			async addCart() {
				// 拿到真实的价格('¥75(现场票)2022-04-30 00:00:00开售') ==> ('75')
				let price = this.imgLsit.nowPrice;
				let newprice = price.indexOf("(") - 1;
				newprice = price.substr(1, newprice);
				if (price) {
					let result = await addCartApi({
							userId: this.userInfo.id,
							price: newprice,
							id: this.imgLsit.id,
							time: Date.now(),
							count: 1,
							name: this.imgLsit.name,
							detailaddress: this.imgLsit.detailaddress + "," + this.imgLsit.address,
							bgUrl: this.imgLsit.bgUrl,
						})
						.then((d) => {
							Toast("添加购物车成功");
						})
						.catch((d) => {
							Toast("添加购物车失败");
						});
				} else {
					Toast("该演出是免费的哦");
				}
			},
			onClickButton() {
				Toast("点击按钮");
			},
			onClickLeft() {
				this.$router.push("/index/recommend");
			},
			onClick() {},
		},
	};
</script>
<style lang="less" scoped>
	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		text-align: center;
		margin-top: 0px;
		width: 100%;
		height: 30%;
	}

	hr {
		margin: 0.125rem;
	}

	// 页面开始
	.details-zhuti {
		height: 100%;

		// 页头
		.details-header {
			height: 50px;
			width: 100%;
		}

		.details {
			height: calc(100% - 50px);

			// 主体部分
			.details-main {
				height: 100%;
				overflow-x: hidden;

				.details-banner {
					img {
						height: 100%;
						width: 100%;
					}
				}

				// 主体内的选项卡
				.details-content {
					min-height: 500px;

					.details-content-text {
						.details-content-text-likes {
							font-size: 0.625rem;
							color: gray;
						}

						img {
							width: 100%;
							height: 100%;
						}
					}

					.notice {
						font-size: 0.625rem;

						span {
							color: red;
						}
					}

					.information {
						width: 100%;
						padding: 0.7rem;

						table {
							// background: linear-gradient(to right, rgb(252, 105, 95), rgb(246, 246, 246));
							width: 100%;
							font-size: 0.9375rem;
							border-collapse: collapse;

							.information-text {
								width: 4rem;
							}

							tr,
							td {
								border: 1px solid white;
								border-bottom: 1px solid black;
							}
						}
					}
				}
			}
		}
	}
</style>
